<template>
  <div  >
    <div id="div1">
      <div id="div1_1">
        <el-row :gutter="15">
          <el-form ref="elForm" :model="patientParams" size="medium" label-width="100px">
            <el-col :span="15">
              <el-form-item label="患者姓名" >
                <el-input v-model="patientParams.patientName" placeholder="请输入患者姓名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="-1px" label="" prop="field102">
                <el-button type="primary" @click="selectPatient()" size="medium"> 选择患者 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="身份证号" >
                <el-input v-model="patientParams.patientIdnum" placeholder="请输入身份证号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="性别" >
                <el-radio-group v-model="patientParams.patientSex" size="medium">
                  <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="出生日期" >
                <el-date-picker v-model="patientParams.patientBirth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择出生日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="年龄" >
                <el-input v-model="patientParams.patientAge" placeholder="请输入年龄" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="地址信息" >
                <el-input v-model="patientParams.patientAddress" placeholder="请输入地址信息" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="过敏史" >
                <el-input v-model="patientParams.patientHistory" placeholder="请输入过敏史" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="" prop="field113">
                <el-button type="primary" @click="button2()" size="medium"> 历史病例 </el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>

    <!-- 查询数据库所有用户 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-tabs type="border-card">
        <el-tab-pane label="待就诊列表">
          <el-table v-loading="loading" :data="waitTreat"  >
            <el-table-column label="患者姓名" prop="treatPatient.patientName" ></el-table-column>
            <el-table-column label="流水编号" prop="registerId" ></el-table-column>
            <el-table-column label="挂号类型" prop="systemTregistraFee.registraName"  ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-edit"
                  @click="TreatingButton(scope.row.registerId)"
                >接诊</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="就诊中列表">
          <el-table v-loading="loadingTreating" :data="treating"  >
            <el-table-column label="患者姓名" prop="treatPatient.patientName" ></el-table-column>
            <el-table-column label="流水编号" prop="registerId" ></el-table-column>
            <el-table-column label="挂号类型" prop="systemTregistraFee.registraName"  ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-edit"
                  @click="TreatingButton(scope.row.registerId)"
                >载入</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="就诊完成列表">
          <el-table v-loading="loadingTreatEnd" :data="treatEnd"  >
            <el-table-column label="患者姓名" prop="treatPatient.patientName" ></el-table-column>
            <el-table-column label="流水编号" prop="registerId" ></el-table-column>
            <el-table-column label="挂号类型" prop="systemTregistraFee.registraName"  ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-edit"
                  @click="TreatingButton(scope.row.registerId)"
                >载入</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

    <!-- 查询患者的历史病例-->
    <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
      <el-table v-loading="loading2" :data="table2"  >
        <el-table-column label="诊断信息" prop="historyDiagnosis"  width="200"></el-table-column>
        <el-table-column label="发病日期" prop="historyDate"  width="200"></el-table-column>
        <el-table-column label="病人描述" prop="historyDiscribe"  width="200"></el-table-column>
        <el-table-column label="医生建议" prop="historyProposal"  width="200"></el-table-column>
      </el-table>
    </el-dialog>
    <div id="div2">
      <div id="div2_1">
        <span>挂号单ID:</span><span id="span1" >{{guahaonumber}}</span><br>
        <span>病例编号:</span><span id="span2">{{binglinumber}}</span></div>
      <div id="div2_2">
        <el-button type="primary" @click="addPatientHistory()">保存病例</el-button>
        <el-button type="danger"  @click="jiuzhenwancheng()">就诊完成</el-button>
      </div>
    </div>
    <div id="div3">
      <el-tabs type="border-card">
        <el-tab-pane label="病例">
          <div>
            <!--   添加病例的form表单   -->
            <el-row :gutter="15">
              <el-form ref="aaa" :model="bingli" size="medium" label-width="100px">
                <el-col :span="8">
                  <el-form-item label="发病日期" prop="historyDate">
                    <el-date-picker
                      v-model="bingli.historyDate"
                      size="small"
                      style="width:170px"
                      value-format="yyyy-MM-dd"
                      type="date"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="诊断类型" prop="historyType">
                    <el-select v-model="bingli.historyType" placeholder="请选择诊断类型" clearable :style="{width: '100%'}">
                      <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否传染" prop="historyContagion">
                    <el-select v-model="bingli.historyContagion" placeholder="请选择是否传染" clearable :style="{width: '100%'}">
                      <el-option v-for="(item, index) in contagionOptions" :key="index" :label="item.label"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="主诉" prop="historyDiscribe">
                    <el-input v-model="bingli.historyDiscribe" type="textarea" placeholder="请输入主诉"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="诊断信息" prop="historyDiagnosis">
                    <el-input v-model="bingli.historyDiagnosis" type="textarea" placeholder="请输入诊断信息"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="医生建议" prop="historyProposal">
                    <el-input v-model="bingli.historyProposal" type="textarea" placeholder="请输入医生建议"
                              :autosize="{minRows: 2, maxRows: 2}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="医生备注" prop="historyRemark">
                    <el-input v-model="bingli.historyRemark" type="textarea" placeholder="请输入医生备注"
                              :autosize="{minRows: 2, maxRows: 2}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>

              </el-form>
            </el-row>

          </div>
        </el-tab-pane>
        <el-tab-pane label="处方">
          <div>
            <el-button @click="chouti1()" icon="el-icon-plus" type="success">添加药用处方</el-button>

            <el-drawer
              title="药用项目"
              :visible.sync="drawer1"
              :direction="direction1"
              ref="nevDrawer"
              :before-close="handleClose">
              <el-form :model="queryParamsDrug" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                <el-form-item label="关键词" prop="patientName">
                  <el-input
                    v-model="queryParamsDrug.drugName"
                    placeholder="请输入关键词"
                    clearable
                    size="small"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="chouti1()">搜索</el-button>
                </el-form-item>
              </el-form>
              <el-table v-loading="loading3" :data="table3" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="药品ID" align="center" prop="drugId" />
                <el-table-column label="药品名称" align="center" prop="durgName" />
                <el-table-column label="库存量" align="center" prop="durgNumber" />
                <el-table-column label="单位" align="center" prop="durgUnit" />
                <el-table-column label="换算量" align="center" prop="durgConvert" />
              </el-table>
              <div style="text-align: right">
                <el-button  @click="button4()" type="primary">添加并关闭</el-button>
              </div>


              <!--                显示病例所选药品的表格-->
              <el-dialog :title="title5" :visible.sync="open5" width="1000px"  append-to-body>
                <el-button icon="el-icon-plus" @click="button5()"  type="success">确定添加</el-button>
                <div style="font-size: 20px ">所选药品总共需要<font class="font1">{{drugPriceCount}}</font>元</div>
                <el-table v-loading="loading5" :data="table5"  >
                  <el-table-column label="序号" prop="drugId"  ></el-table-column>
                  <el-table-column label="药品名字" prop="durgName"  ></el-table-column>
                  <el-table-column  label="数量" align="center" width="150px" prop="jishuqi" >
                    <template slot-scope="scope">
                      <el-input-number
                        v-model="scope.row.jishuqi"
                        size="mini"
                        :min="1"
                        :max="20"
                        @change="handleChange(scope.row)"
                        label="描述文字"
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)"  prop="durgOtcPrice"  ></el-table-column>
                  <el-table-column label="金额(元)"  prop="sum"  >
                    <template slot-scope="scope">
                      <div @change="sumqiuhe(scope.row)">{{scope.row.sum}}</div>
                    </template>
                    <!--                      <template slot-scope="scope" >-->
                    <!--                        <p v-html="scope.row.otcPrice*scope.row.jishuqi"></p>-->
                    <!--                      </template>-->
                  </el-table-column>
                  <el-table-column label="服用备注"  prop="fuyongbeizhu"  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fuyongbeizhu" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>

            </el-drawer>


            &nbsp; &nbsp; &nbsp;
            <el-button  @click="chouti2()"  icon="el-icon-plus" type="success">添加检查处方</el-button>
            <el-drawer
              title="检查项目"
              :visible.sync="drawer2"
              :direction="direction2">

              <el-dialog :title="title4" :visible.sync="open4" width="1000px" append-to-body>
                <el-table v-loading="loading4" :data="table4"  >

                </el-table>
              </el-dialog>
            </el-drawer>
          </div>


          <el-collapse v-model="activeName" accordion>
            <el-collapse-item  name="1">
              <template slot="title">
                【药品处方】【1】【处方总额】:￥<font class="font1">{{drugPriceCount}}</font>
              </template>
              <el-table id="table" v-loading="loading6" :data="table6" >
                <el-table-column label="药品ID" align="center" prop="drugId" />
                <el-table-column label="药品名称" align="center" prop="durgName" />
                <el-table-column label="数量" align="center" prop="jishuqi" />
                <el-table-column label="单价" align="center" prop="durgOtcPrice" />
                <el-table-column label="总额" align="center" prop="sum" />
                <el-table-column label="服用备注" align="center" prop="fuyongbeizhu" />
                <el-table-column label="状态" align="center" prop="zhifuzhuangtai" />
              </el-table>
            </el-collapse-item>
            <el-collapse-item  name="2">
              <template slot="title">
                【检查处方】【2】【处方总额】:￥<font class="font1">0</font>
              </template>
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            </el-collapse-item>
          </el-collapse>




        </el-tab-pane>
      </el-tabs>
    </div>

    <!--<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />-->
  </div>

</template>

<script>
    import { listDrug,getRegisterInfo,listRegister,modifyRegisterBystatus,addCase,listbingli,addjiuzhen } from "@/api/treat/newvisit";
    export default {
        components: {},
        props: [],
        data() {
            return {
                //药品处方总金额
                drugPriceCount: 0,
                // 显示搜索条件
                showSearch: true,
                //正在就诊的信息表格
                loadingTreating:false,
                treating:[],
                //等待就诊
                waitTreat: [],
                //就诊完成
                loadingTreatEnd:false,
                treatEnd: [],
                //设置折叠面板手风琴风格
                activeName: '1',
                // 患者信息查询参数
                patientParams: {
                    patientSex:2,
                },
                bingli: {
                    historyDate: null,
                    historyType: undefined,
                    historyContagion: undefined,
                    historyDiscribe: undefined,
                    historyDiagnosis: undefined,
                    historyProposal: undefined,
                    historyRemark: undefined,
                    historyPatientId:0
                },
                // 状态数据字典
                chuanranbingOptions: [],
                // 遮罩层
                loading: true,

                title: "挂号",
                rules: {
                    date: [],
                    type: [],
                    contagion: [],
                    discribe: [],
                    diagnosis: [],
                    proposal: [],
                    doctorRemark: [],
                },
                //是否显示弹出层
                open:false,
                //点击选择患者 默认发送的status状态为待就诊的用户
                /*queryParams:{
                    registerStatus1: "待就诊",
                    registerStatus2: "正在就诊",
                    registerStatus3: "就诊完成"
                },*/
                // 查询参数
                queryParamsDrug: {
                    drugName: undefined
                },
                typeOptions: [{
                    "label": "初诊",
                    "value": 0
                }, {
                    "label": "复诊",
                    "value": 1
                }],
                contagionOptions: [{
                    "label": "否",
                    "value": 0
                }, {
                    "label": "是",
                    "value": 1
                }],
                sexOptions: [{
                    "label": "男",
                    "value": 0
                }, {
                    "label": "女",
                    "value": 1
                }, {
                    "label": "未知",
                    "value": 2
                }],
                //选择患者的表格
                guahao:[],
                //挂号单ID的显示
                guahaonumber:"选中患者后显示",
                binglinumber:"保存病例后显示",
                //历史病例的表格信息， 标题  是否打开  是否有遮罩层, 表格定义
                title2:"历史病例",
                open2:false,
                loading2:true,
                table2:[],
                //药用处方的抽屉
                drawer1: false,
                direction1: 'rtl',
                //检查处方的抽屉
                drawer2: false,
                direction2: 'rtl',
                //药用信息的表格
                title3:"药品信息",
                open3:false,
                loading3:true,
                table3:[],
                //检查处方的表格
                title4:"表格信息",
                open4:false,
                loading4:true,
                table4:[],
                //检查处方的表格
                title5:"表格信息",
                open5:false,
                loading5:true,
                table5:[],
                //所选内容的表格
                loading6:false,
                table6:[],

                //表格多选选中数据
                // 选中数组
                ids1: [],
                // 非单个禁用
                single1: true,
                // 非多个禁用
                multiple1: true,
                props: {
                    num :0,
                    yuanlaidedanjia:{
                        type: Array,
                        default: ()=>[]
                    },
                }
            }
        },
        computed: {},
        watch: {},
        created() {
            this.getDicts("doctor_newvisit_infectiousDiseases").then(response => {
                this.chuanranbingOptions = response.data;
            });
            //给数组赋初值
            for (var i=0;i<100;i++){
                this.props.yuanlaidedanjia[i]=0;
            }
        },
        mounted() {},
        methods: {
            //获取药品列表
            /*gitList() {
                listDrug().then(response => {
                    console.log(response.rows);
                    this.table3=response.rows;
                });
            },*/
            sumqiuhe(value){
                console.log("值的变化"+value);
                this.num=this.num+value;
            },
            handleChange(value){
                //arr.splice(arr.indexOf(ele),length)
                var ceshi = this.table5[this.table5.indexOf(value)];
                ceshi.sum= ceshi.jishuqi*ceshi.durgOtcPrice;
                this.drugPriceCount = 0;
                for (var i = 0; i < this.table5.length; i++) {
                    this.drugPriceCount = this.drugPriceCount + this.table5[i].sum;
                }
                /*this.props.num =this.props.num /!*- this.props.yuanlaidedanjia[ceshi.drugId]*!/ +ceshi.sum;

                this.props.yuanlaidedanjia[ceshi.id]=ceshi.sum;*/
            },
            change(e){
                this.$forceUpdate(); // @change="forceUpdate($event)"主要是解决clear图标响应问题
            },

            //关闭抽屉
            handleClose:function(done) {
                done();
            },
            // 是否是传染病字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.chuanranbingOptions, row.contagion);
            },
            //点击查询所有等待就诊信息，正在就诊信息和就诊完成信息
            selectPatient: function () {
                this.open=true;
                listRegister("待就诊").then(response => {
                    console.log(response.data);
                    this.waitTreat=response.data;
                    this.loading=false;
                });
                listRegister("正在就诊").then(response => {
                    this.treating=response.data;
                    this.loadingTreating=false;
                });
                listRegister("就诊完成").then(response => {
                    this.treatEnd=response.data;
                    this.loadingTreatEnd=false;
                });
            },
            //点击查询该用户所有的历史病例
            button2: function(){
                this.open2=true;
                listbingli({patientId:this.bingli.historyPatientId}).then(response =>{
                    this.table2 = response.rows;
                    this.loading2=false;
                })
            },
            //点击查询该用户的所有药品
            button3:function(){
                this.loading3=false;
            },
            //药品选择完毕  关闭选择框
            button4:function(done){
                //关闭抽屉
                this.$refs.nevDrawer.closeDrawer();
                this.open5=true;   //打开表格
                this.table5=this.ids1;  //给表格赋值
                //药品计算总量的数字初始化
                this.chushihuacheliang();
                this.ids1.forEach((e,i)=>{
                    //this.$set(e,{"jishuqi": 1,fuyongbeizhu:""});
                    this.$set(e,"jishuqi",1);
                    this.$set(e,"fuyongbeizhu","无");
                    this.$set(e,"sum",0);
                    this.$set(e,"zhifuzhuangtai","未支付");
                    //下面这个在VUE实例创建时，属性不会声明 不是响应式属性，
                    //  Object.assign(e,{count:1,fuyongbeizhu:"多喝热水"})
                    // e.jishuqi=1;
                    e.sum=e.jishuqi*e.otcPrice;
                    this.props.num=this.props.num+e.sum;
                    this.props.yuanlaidedanjia[e.id]=e.sum;
                })
                this.loading5=false;
                for (var i = 0; i < this.table5.length; i++) {
                    this.table5[i].sum = this.table5[i].durgOtcPrice;
                    this.drugPriceCount = this.drugPriceCount + this.table5[i].durgOtcPrice;
                }
            },
            button5:function(){
                this.table6=this.table5;
                this.open5=false;
                console.log(this.table6);
                handleChange(scope.row)
            },
            chouti1:function(){
                this.loading3 = true;
                listDrug(this.queryParamsDrug).then(response => {
                    this.table3=response.rows;
                });
                this.drawer1=true;
                this.loading3=false;
            },
            chouti2:function(){
                this.drawer2=true;
            },
            //初始化总额栏
            chushihuacheliang:function(){
                this.props.num=0;
                for (var i=0;i<100;i++){
                    this.props.yuanlaidedanjia[i]=0;
                }
            },
            //选择确诊用户
            TreatingButton: function (registerId) {
                this.open=false;
                getRegisterInfo(registerId).then(res => {
                    console.log(res.data)
                    this.patientParams = res.data;
                    this.guahaonumber = registerId;
                    this.bingli.historyPatientId = registerId;
                    if (res.data.patientSex == "男"){
                        this.patientParams.patientSex = 0;
                    }else if(res.data.patientSex == "女"){
                        this.patientParams.patientSex = 1;
                    }else if(res.data.patientSex == "未知"){
                        this.patientParams.patientSex = 2;
                    }
                    console.log(res.data)
                });
            },
            //载入信息
            zairu: function(row){

            },
            xiugaizhuangtai:function(id,status){
                modifyRegisterBystatus({id:id,status:status})
            },
            addPatientHistory:function () {
                addCase(this.bingli).then(response=>{
                    if(response > 0){
                        alert("保存成功");
                        this.binglinumber=response;
                    }
                })
            },
            jiuzhenwancheng:function(){
                alert("保存成功");
                //addjiuzhen(this.table6,"jimo");
                // this.$axios.post({
                //     methed:'post',
                //     url: 'http://localhost:8080/doctor/newvisit/addjiuzhen',
                //     data:{
                //         list: this.table6,
                //         sss: 'jimo',
                //     }
                // })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids1 = selection;
                this.single1 = selection.length!=1;
                this.multiple1 = !selection.length;
            },
            handleDelete:function (row) {
                //arr.splice(arr.indexOf(ele),length): 先找到对应数据下标，然后删除长度为几的元素
                this.ids1.splice(this.ids1.indexOf(row),1);
                this.props.num=this.props.num-this.props.yuanlaidedanjia[row.id];
            },
        }
    }

</script>

<style scoped>
  #div1{
    width: 470px;

    display:inline-block;
    position: absolute;
    left: 15px;
    top: 20px;
    height: 590px;
    box-shadow:0px 0px 10px #dddddd;
  }
  #div1_1{
    position: relative;
    left: 10px;
    top: 20px;
  }
  #div2{

    width: 820px;
    height: 100px;
    position: absolute;
    left: 500px;
    top: 20px;
    box-shadow:0px 0px 10px #dddddd;
  }
  #div3{
    width: 820px;
    height: 400px;

    position: absolute;
    left: 500px;
    top: 140px;
    box-shadow:0px 0px 10px #dddddd;
  }
  #div2_1{
    width: 300px;
    height: 100%;
    margin-top: 25px;
    margin-left: 20px;
    float: left;

  }
  #div2_2{
    width: 300px;
    height: 100%;
    margin-top: 25px;
    float: right;
  }
  #span1{
    color: red;
  }
  #span2{
    color: blue;
  }
  #choutianniu1{
    position: absolute;
    left: 260px;
    top: 300px;
  }
  .font1{
    color: red;
  }
</style>
